<!DOCTYPE html>
<html lang="en">

<head>
    <script src="./scripts/checkLogin.js"></script>
    <title>My BCIT Project</title>
    <meta name="comp2800 template" content="My 2800 App">

    <!------------------------>
    <!-- Required meta tags -->
    <!------------------------>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!------------------------------------------>
    <!-- Bootstrap Library CSS JS CDN go here -->
    <!------------------------------------------>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

    <!-------------------------------------------------------->
    <!-- Firebase 8 Library related CSS, JS, JQuery go here -->
    <!-------------------------------------------------------->
    <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <!-------------------------------------------->
    <!-- Other libraries and styles of your own -->
    <!-------------------------------------------->
    <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
    <!-- <link rel="stylesheet" href="./styles/style.css"> -->

</head>

<body>
    <!------------------------------>
    <!-- Your HTML Layout go here -->
    <!------------------------------>

    <!-- our own navbar goes here -->
    <nav id="navbarPlaceholder"></nav>

    <!-- the body of your page goes here -->
    <!-- stuff -->


    <div class="container">
        <div class="row">
            <div class="col">
                <div class="jumbotron">
                    <h1 class="display-4">Hello,Dear ocean lovers!</h1>
                    <p class="lead">This is a web page about how to protect the Marine environment</p>
                    <hr class="my-4">
                    <p>The ocean, the vast blue world that covers about 70 percent of Earth's surface, is the cradle of life on Earth. It not only provides us with rich food resources and precious energy, but also plays an irreplaceable role in regulating climate and maintaining ecological balance. However, today our oceans are facing unprecedented challenges, and there is no time to delay in protecting the Marine environment.</p>
                    <button onclick="window.location.href='Registration.html'" id="makePostButton" class="btn btn-primary px-5 
                    mb-5 " type="button">Learn more</button>
                </div>
            </div>
            <div class="col">
                <img src="./images/hai.t-239hRBA3iKKdjHean2PgHaEp" class="rounded float-left" alt="...">
            </div>
        </div>
    </div>
    




    <div class="container">
    <div class="row mt-4">
        <div class="col-sm">
            <div class="card" style="width: 18rem;">
                <img src="./images/h2.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <p class="card-text">Every year, a huge amount of plastic waste ends up in the ocean. This plastic waste is difficult to degrade and forms huge patches of garbage in the ocean, like the famous Great Pacific Garbage Patch, which is even larger than many countries. Plastic waste not only affects the survival of Marine life, many Marine animals will mistake plastic for food, resulting in intestinal blockage, malnutrition and even death. It is estimated that millions of Marine animals die every year due to plastic waste.</p>
                </div>
            </div>
        </div>

        <div class="col-sm">
            <div class="card" style="width: 18rem;">
                <img src="./images/h3.75FkRdYv1x7en4-gUOeN1QHaEK" class="card-img-top" alt="...">
                <div class="card-body">
                    <p class="card-text">As the global population grows, so does the demand for Marine fish and other seafood. Overfishing has dramatically reduced many fish stocks, and some rare fish are even on the verge of extinction. This not only disrupts the Marine food chain, but also affects the balance of the entire Marine ecosystem. Many other Marine life that depend on these fish are also facing an existential crisis, and the entire Marine ecology is trapped in a vicious circle.</p>
                </div>
            </div>
        </div>

        <div class="col-sm">
            <div class="card" style="width: 18rem;">
                <img src="./images/h4.png" class="card-img-top" alt="...">
                <div class="card-body">
                    <p class="card-text">Leakage accidents often occur in the course of offshore oil exploitation and transportation. After an oil spill, a large oil film will form on the surface of the sea, preventing oxygen from entering the water, causing a large number of Marine life to die due to lack of oxygen. At the same time, harmful substances in oil will also cause damage to the physiological function of Marine organisms, affecting their reproduction, growth and development. The Exxon Valdez spill in 1989, for example, caused catastrophic damage to the Alaskan ecosystem, and much Marine life has yet to recover to pre-accident levels.</p>
                </div>
            </div>
        </div>

    </div>
    </div>




    <div class="container">
    <div class="row mt-4">
        <div class="col">
            <p>Thank you for your comments and suggestions</p>
            <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
                    Evaluate
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">As good as gold</a>
                    <a class="dropdown-item" href="#">Fair enough</a>
                    <a class="dropdown-item" href="#">Need improvement</a>
                </div>
            </div>


        </div>
        <div class="col">
            <div class="input-group mb-3">
                <input type="text" class="form-control" placeholder="Some suggestions" aria-label="Some suggestions" aria-describedby="button-addon2">
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button" id="button-addon2">Submit</button>
                </div>
            </div>
        </div>
    </div>
    </div>
    

    <!-- our own footer goes here-->
    <nav id="footerPlaceholder"></nav>

    <!---------------------------------------------->
    <!-- Your own JavaScript functions go here    -->
    <!---------------------------------------------->
    <script src="./scripts/skeleton.js"></script>
    <!-- <script src="./scripts/script.js"></script> -->

</body>

</html>
